---
import type { CollectionEntry } from "astro:content";
import { Icon } from "astro-icon/components";
import I18nKey from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import { getTagUrl } from "@/utils/url-utils";
import PostMetadata from "./PostMeta.astro";

interface Props {
  class?: string;
  entry: CollectionEntry<"posts">;
  title: string;
  url: string;
  published: Date;
  updated?: Date;
  tags: string[];
  category: string | null;
  description: string;
  draft: boolean;
  pinned?: boolean;
  style: string;
}
const {
  entry,
  title,
  url,
  published,
  updated,
  tags,
  category,
  description,
  pinned,
  style,
} = Astro.props;
const className = Astro.props.class;

const { remarkPluginFrontmatter } = await entry.render();
---

<div
  class:list={[
    "card-base w-full rounded-[var(--radius-large)] overflow-hidden relative",
    className,
  ]}
  style={style}
>
  <div class="p-6 relative">
    <!-- 标题和置顶图标 -->
    <a
      href={url}
      class="transition group w-full block font-bold mb-3 text-xl text-90
        hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
        active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
        before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
        before:absolute before:top-[28px] before:left-[-18px] before:block"
    >
      {
        pinned && (
          <Icon
            name="mdi:pin"
            class="inline text-[var(--primary)] text-lg mr-2 -translate-y-0.5"
          />
        )
      }
      {title}
      <Icon
        class="text-[var(--primary)] text-lg transition hidden group-hover:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0"
        name="material-symbols:chevron-right-rounded"
      />
    </a>

    <!-- metadata -->
    <PostMetadata
      published={published}
      updated={updated}
      tags={tags}
      category={category || undefined}
      hideTagsForMobile={true}
      hideUpdateDate={true}
      words={remarkPluginFrontmatter.words}
      minutes={remarkPluginFrontmatter.minutes}
      showWordCount={true}
      className="mb-3"
    />

    <!-- description -->
    <div class="transition text-75 mb-3 pr-4 line-clamp-2">
      {description || remarkPluginFrontmatter.excerpt}
    </div>

    <!-- tags -->
    <div
      class="text-sm text-black/30 dark:text-white/30 flex flex-wrap gap-2 transition"
    >
      {
        tags &&
          tags.length > 0 &&
          tags.map((tag, i) => (
            <a
              href={getTagUrl(tag)}
              aria-label={`View all posts with the ${tag.trim()} tag`}
              class="btn-regular h-6 text-xs px-2 py-1 rounded-md border border-[var(--line-divider)]
                    transition-all duration-200 hover:scale-105 active:scale-95"
            >
              #{tag.trim()}
            </a>
          ))
      }
      {
        !(tags && tags.length > 0) && (
          <span class="text-[var(--content-meta)] text-xs">
            {i18n(I18nKey.noTags)}
          </span>
        )
      }
    </div>
  </div>
</div>
